{% extends "base.html" %}

{% block title %}个人中心 - 云水禅心居{% endblock %}

{% block extra_head %}
<style>
    .profile-container {
        max-width: 100%;
        margin: 2rem auto;
        padding: 0 2rem;
    }
    
    /* 双栏布局容器 */
    .profile-content {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        margin-top: 2rem;
    }
    
    /* 左侧栏 - 个人文章 */
    .profile-left-column {
        flex: 1;
        min-width: 300px;
    }
    
    /* 右侧栏 - 待办事项 */
    .profile-right-column {
        flex: 1;
        min-width: 300px;
    }
    
    /* 响应式布局 - 手机端转为单列 */
    @media (max-width: 992px) {
        .profile-content {
            flex-direction: column;
        }
        
        .profile-container {
            padding: 0 1rem;
        }
    }
    
    .profile-header {
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
    }
    .profile-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        color: var(--secondary-color);
        margin-right: 1.5rem;
        transition: background-color var(--transition-time), color var(--transition-time);
    }
    .profile-info {
        flex: 1;
    }
    .profile-username {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
        color: var(--text-color);
        transition: color var(--transition-time);
    }
    .profile-stats {
        color: var(--secondary-color);
        display: flex;
        gap: 1rem;
        transition: color var(--transition-time);
    }
    .profile-section {
        margin-bottom: 2rem;
    }
    .profile-section-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 0.5rem;
        color: var(--text-color);
        transition: border-bottom var(--transition-time), color var(--transition-time);
    }
    .profile-posts {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    /* 新的卡片样式 */
    .profile-post-card {
        width: 100%;
        aspect-ratio: 3/1.5;
        background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
        border-radius: 20px;
        transition: all .3s;
        position: relative;
    }
    
    .profile-post-inner {
        width: 100%;
        height: 100%;
        background-color: var(--card-bg);
        border-radius: 18px;
        transition: all .2s;
        display: flex;
        flex-direction: row;
        padding: 0.8rem;
        position: relative;
    }
    
    .profile-post-inner:hover {
        transform: scale(0.98);
        border-radius: 20px;
    }
    
    .profile-post-card:hover {
        box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);
    }
    
    .article-cover {
        width: 130px;
        height: auto;
        margin: 0 0.8rem 0 0;
        border-radius: 12px;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    .article-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .profile-post-inner:hover .article-cover img {
        transform: scale(1.05);
    }
    
    .post-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 130px;
    }
    
    .profile-post-title {
        font-size: 1rem;
        margin-bottom: 0.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .profile-post-title a {
        color: var(--primary-color);
        text-decoration: none;
        transition: color var(--transition-time);
    }
    
    .profile-post-date {
        color: var(--secondary-color);
        font-size: 0.75rem;
        margin-bottom: 0.2rem;
        transition: color var(--transition-time);
    }
    
    .profile-post-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-top: 0.2rem;
        max-height: 1.3rem;
        overflow: hidden;
    }
    
    .tag {
        display: inline-block;
        background: var(--border-color);
        padding: 0.1rem 0.4rem;
        border-radius: 20px;
        font-size: 0.7rem;
        color: var(--secondary-color);
        transition: background-color var(--transition-time), color var(--transition-time);
    }
    
    .post-actions {
        display: flex;
        gap: 0.8rem;
        margin-top: auto;
        padding-top: 0.5rem;
    }
    
    .no-content {
        text-align: center;
        padding: 2rem;
        color: var(--secondary-color);
        background: var(--card-bg);
        border-radius: 8px;
        transition: color var(--transition-time), background-color var(--transition-time);
    }
    .profile-edit-btn {
        padding: 0.5rem 1rem;
        background-color: var(--border-color);
        color: var(--secondary-color);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        font-size: 0.9rem;
        transition: background-color var(--transition-time), color var(--transition-time);
    }
    .profile-edit-btn:hover {
        background-color: var(--primary-color);
        color: white;
    }
    
    /* 新的按钮样式 */
    .btn-edit, 
    .btn-delete,
    .btn-confirm,
    .btn-cancel {
      /* 变量 */
      --button_radius: 0.75em;
      font-size: 14px;
      font-weight: bold;
      border: none;
      cursor: pointer;
      border-radius: var(--button_radius);
      text-decoration: none;
    }
    
    .btn-edit, 
    .btn-delete {
      width: 95px;
      background: #000000;
    }
    
    .btn-confirm, 
    .btn-cancel {
      width: 100px;
      background: #000000;
    }
    
    .btn-edit .button_top, 
    .btn-delete .button_top,
    .btn-confirm .button_top,
    .btn-cancel .button_top {
      display: block;
      box-sizing: border-box;
      border: 2px solid #000000;
      border-radius: var(--button_radius);
      padding: 0.5em 0.8em;
      transform: translateY(-0.2em);
      transition: transform 0.1s ease;
    }
    
    .btn-edit .button_top {
      background: #e8e8e8;
      color: #28a745;
    }
    
    .btn-delete .button_top {
      background: #e8e8e8;
      color: #dc3545;
    }
    
    .btn-confirm .button_top {
      background: #e8e8e8;
      color: #dc3545;
    }
    
    .btn-cancel .button_top {
      background: #e8e8e8;
      color: #6c757d;
    }
    
    .btn-edit:hover .button_top, 
    .btn-delete:hover .button_top,
    .btn-confirm:hover .button_top,
    .btn-cancel:hover .button_top {
      /* 悬停时向上拉按钮 */
      transform: translateY(-0.33em);
    }
    
    .btn-edit:active .button_top, 
    .btn-delete:active .button_top,
    .btn-confirm:active .button_top,
    .btn-cancel:active .button_top {
      /* 按下时将按钮向下推 */
      transform: translateY(0);
    }
    
    /* 修改密码按钮新样式 */
    .btn-change-password {
      display: inline-block;
      width: 120px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid #03045e;
      position: relative;
      overflow: hidden;
      transition: all 0.5s ease-in;
      z-index: 1;
      text-decoration: none;
    }

    .btn-change-password::before,
    .btn-change-password::after {
      content: '';
      position: absolute;
      top: 0;
      width: 0;
      height: 100%;
      transform: skew(15deg);
      transition: all 0.5s;
      overflow: hidden;
      z-index: -1;
    }

    .btn-change-password::before {
      left: -10px;
      background: #240046;
    }

    .btn-change-password::after {
      right: -10px;
      background: #5a189a;
    }

    .btn-change-password:hover::before,
    .btn-change-password:hover::after {
      width: 58%;
    }

    .btn-change-password:hover span {
      color: #e0aaff;
      transition: 0.3s;
    }

    .btn-change-password span {
      color: #03045e;
      font-size: 16px;
      transition: all 0.3s ease-in;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    
    .confirm-dialog {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }
    .dialog-content {
        background-color: var(--card-bg);
        padding: 2rem;
        border-radius: 8px;
        width: 350px;
        max-width: 90%;
        text-align: center;
        transition: background-color var(--transition-time);
    }
    .dialog-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        color: var(--text-color);
        transition: color var(--transition-time);
    }
    .dialog-message {
        margin-bottom: 1.5rem;
        color: var(--secondary-color);
        transition: color var(--transition-time);
    }
    .dialog-buttons {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
    }
    .article-cover img.lazy {
        width: 100%;
        height: auto;
        border-radius: 8px;
        transition: opacity 0.3s ease;
        opacity: 0;
    }
    .article-cover img.lazy.loaded {
        opacity: 1;
    }
    
    /* 账户安全按钮样式 */
    .security-btn {
        margin-left: 10px;
        background-color: #f39c12 !important;
    }
    
    .security-btn:hover {
        background-color: #e67e22 !important;
    }
    
    /* 待办事项样式 */
    .add-task-container {
        background-color: var(--card-bg);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: var(--box-shadow);
        transition: background-color var(--transition-time), box-shadow var(--transition-time);
    }
    
    .add-task-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .task-form-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .task-form-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }
    
    /* 新的输入框样式 */
    .input-container {
        position: relative;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .input-container input[type="text"],
    .input-container textarea {
        font-size: 16px;
        width: 100%;
        border: none;
        border-bottom: 2px solid var(--border-color);
        padding: 5px 0;
        background-color: transparent;
        outline: none;
        color: var(--text-color);
        transition: all 0.3s ease;
    }
    
    .input-container textarea {
        resize: vertical;
        min-height: 60px;
        margin-top: 15px;
        border: none;
        border-bottom: 2px solid var(--border-color);
    }
    
    .input-container .label {
        position: absolute;
        top: 5px;
        left: 0;
        color: var(--secondary-color);
        transition: all 0.3s ease;
        pointer-events: none;
    }
    
    .input-container input[type="text"]:focus ~ .label,
    .input-container input[type="text"]:valid ~ .label,
    .input-container textarea:focus ~ .label,
    .input-container textarea:valid ~ .label {
        top: -20px;
        font-size: 14px;
        color: var(--primary-color);
    }
    
    .input-container .underline {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background-color: var(--primary-color);
        transform: scaleX(0);
        transition: all 0.3s ease;
    }
    
    .input-container input[type="text"]:focus ~ .underline,
    .input-container input[type="text"]:valid ~ .underline,
    .input-container textarea:focus ~ .underline,
    .input-container textarea:valid ~ .underline {
        transform: scaleX(1);
    }
    
    .task-date, .task-select {
        padding: 10px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background-color: var(--background-color);
        color: var(--text-color);
        transition: border-color 0.2s, background-color var(--transition-time), color var(--transition-time);
    }
    
    .task-date:focus, .task-select:focus {
        border-color: var(--primary-color);
        outline: none;
    }
    
    .add-task-btn {
        padding: 10px 20px;
        border: none;
        font-size: 17px;
        color: #fff;
        border-radius: 7px;
        letter-spacing: 4px;
        font-weight: 700;
        text-transform: uppercase;
        transition: 0.5s;
        transition-property: box-shadow;
        background: rgb(0,140,255);
        box-shadow: 0 0 25px rgb(0,140,255);
    }
    
    .add-task-btn:hover {
        box-shadow: 0 0 5px rgb(0,140,255),
                  0 0 25px rgb(0,140,255),
                  0 0 50px rgb(0,140,255),
                  0 0 100px rgb(0,140,255);
    }
    
    .tasks-container {
        margin-top: 20px;
    }
    
    .task-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .task-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        background-color: var(--card-bg);
        border-radius: 8px;
        padding: 15px;
        box-shadow: var(--box-shadow);
        border-left: 4px solid #3498db; /* 默认颜色 */
        transition: background-color var(--transition-time), box-shadow var(--transition-time);
    }
    
    .task-item.priority-0 {
        border-left-color: #3498db; /* 低优先级 */
    }
    
    .task-item.priority-1 {
        border-left-color: #f39c12; /* 中优先级 */
    }
    
    .task-item.priority-2 {
        border-left-color: #e74c3c; /* 高优先级 */
    }
    
    .task-item.completed {
        opacity: 0.7;
        border-left-color: #27ae60;
    }
    
    .task-item.completed .task-title {
        text-decoration: line-through;
        color: var(--secondary-color);
    }
    
    .task-checkbox-container {
        flex-shrink: 0;
    }
    
    .task-checkbox {
        width: 22px;
        height: 22px;
        border: 2px solid var(--border-color);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background: none;
        padding: 0;
        transition: background-color 0.2s, border-color 0.2s;
    }
    
    .task-checkbox.checked {
        background-color: #27ae60;
        border-color: #27ae60;
        color: white;
    }
    
    .task-content {
        flex-grow: 1;
    }
    
    .task-title {
        margin: 0 0 5px 0;
        font-size: 1.1rem;
        color: var(--text-color);
        transition: color var(--transition-time);
    }
    
    .task-description {
        margin: 5px 0;
        color: var(--secondary-color);
        font-size: 0.9rem;
        transition: color var(--transition-time);
    }
    
    .task-meta {
        display: flex;
        gap: 15px;
        font-size: 0.8rem;
        color: var(--secondary-color);
        margin-top: 5px;
        transition: color var(--transition-time);
    }
    
    .task-deadline {
        color: #f39c12;
    }
    
    .task-deadline.overdue {
        color: #e74c3c;
        font-weight: bold;
    }
    
    .task-actions {
        flex-shrink: 0;
    }
    
    .task-delete-btn {
        background: none;
        border: none;
        color: var(--accent-color);
        cursor: pointer;
        padding: 5px;
        transition: color 0.2s;
    }
    
    .task-delete-btn:hover {
        color: #c0392b;
    }
    
    .no-tasks-message {
        text-align: center;
        padding: 30px;
        background-color: var(--card-bg);
        border-radius: 8px;
        color: var(--secondary-color);
        transition: background-color var(--transition-time), color var(--transition-time);
    }
    
    .task-complete-form, .task-delete-form {
        margin: 0;
    }
    
    @media (max-width: 768px) {
        .task-form-row {
            flex-direction: column;
            align-items: stretch;
        }
        
        .task-form-row > div {
            width: 100%;
        }
    }
    
    /* 时间线模块样式 */
    .timeline-container {
        background-color: var(--card-bg);
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
        box-shadow: var(--box-shadow);
        transition: background-color var(--transition-time), box-shadow var(--transition-time);
    }
    
    .s-timeline {
        position: relative;
        margin: 20px 0;
    }
    
    .s-timeline:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 4px;
        height: 100%;
        background: var(--primary-color);
        z-index: 1;
        transform: translateX(-50%);
    }
    
    .timeline-item {
        position: relative;
        display: flex;
        margin-bottom: 30px;
    }
    
    .timeline-item:nth-child(even) {
        flex-direction: row-reverse;
    }
    
    .timeline-content {
        position: relative;
        width: calc(50% - 30px);
        padding: 15px;
        background: var(--card-bg);
        border-radius: 8px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .timeline-content:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }
    
    .timeline-item:nth-child(odd) .timeline-content:before {
        content: '';
        position: absolute;
        top: 15px;
        right: -15px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid var(--card-bg);
    }
    
    .timeline-item:nth-child(even) .timeline-content:before {
        content: '';
        position: absolute;
        top: 15px;
        left: -15px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 15px solid var(--card-bg);
    }
    
    .timeline-dot {
        position: absolute;
        top: 15px;
        left: 50%;
        width: 20px;
        height: 20px;
        background: var(--accent-color);
        border-radius: 50%;
        z-index: 2;
        transform: translateX(-50%);
        border: 3px solid var(--card-bg);
    }
    
    .timeline-time {
        font-size: 0.8rem;
        color: var(--secondary-color);
        margin-bottom: 5px;
    }
    
    .timeline-text {
        margin: 0;
        font-size: 1rem;
        color: var(--text-color);
    }
    
    .timeline-location {
        font-size: 0.8rem;
        color: var(--secondary-color);
        margin-top: 5px;
        font-style: italic;
    }
    
    .no-notes-message {
        text-align: center;
        padding: 20px;
        color: var(--secondary-color);
    }
    
    @media (max-width: 768px) {
        .s-timeline:before {
            left: 20px;
        }
        
        .timeline-item,
        .timeline-item:nth-child(even) {
            flex-direction: row;
        }
        
        .timeline-content {
            width: calc(100% - 60px);
            margin-left: 40px;
        }
        
        .timeline-dot {
            left: 20px;
        }
        
        .timeline-item:nth-child(odd) .timeline-content:before,
        .timeline-item:nth-child(even) .timeline-content:before {
            left: -15px;
            border-right: 15px solid var(--card-bg);
            border-left: none;
        }
    }
    
    /* 近三天历史记录样式 */
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 1.5rem 0 0.5rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 1px dashed var(--border-color);
    }
    
    .section-subtitle {
        font-size: 1rem;
        color: var(--secondary-color);
        margin: 0;
    }
    
    .toggle-btn {
        background: none;
        border: none;
        color: var(--primary-color);
        cursor: pointer;
        font-size: 0.9rem;
        padding: 0.2rem 0.5rem;
        border-radius: 50%;
        transition: transform 0.3s ease, background-color 0.3s;
    }
    
    .toggle-btn:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    
    .toggle-btn.active i {
        transform: rotate(180deg);
    }
    
    .recent-tasks-list, .recent-notes-list {
        margin-top: 1rem;
        padding: 0.5rem;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .timeline-date {
        font-size: 0.75rem;
        color: var(--primary-color);
        margin-bottom: 0.2rem;
        font-weight: bold;
    }
    
    .section-header-main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    
    .date-selector {
        display: flex;
        align-items: center;
    }
    
    .date-picker {
        padding: 5px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        margin-right: 5px;
    }
    
    .reset-date-btn {
        padding: 5px 10px;
        background: none;
        border: none;
        color: var(--primary-color);
        cursor: pointer;
        font-size: 0.9rem;
    }
    
    .loading-spinner {
        text-align: center;
        padding: 20px;
        background-color: var(--card-bg);
        border-radius: 8px;
        margin-top: 20px;
    }
    
    .spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-top: 4px solid var(--primary-color);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
{% endblock %}

{% block content %}
<div class="profile-container">
    {% if current_user.is_authenticated %}
        <div class="profile-header">
            <div class="profile-avatar">
                {{ current_user.username[0].upper() }}
            </div>
            <div class="profile-info">
                <h1 class="profile-username">{{ current_user.username }}</h1>
                <div class="profile-stats">
                    <div>文章数：{{ current_user.posts|length }}</div>
                    <div>注册时间：
                        {% if current_user.registered_at %}
                            {{ current_user.registered_at.strftime('%Y-%m-%d') }}
                        {% else %}
                            未知
                        {% endif %}
                    </div>
                </div>
                <div class="profile-actions" style="margin-top: 0.8rem;">
                    <a href="{{ url_for('change_password') }}" class="btn-change-password">
                        <span>修改密码</span>
                    </a>
                    <a href="{{ url_for('security_center') }}" class="btn-change-password security-btn">
                        <span>账户安全</span>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 双栏布局内容区域 -->
        <div class="profile-content">
            <!-- 左侧栏 - 我的文章 -->
            <div class="profile-left-column">
                <section class="profile-section">
                    <h2 class="profile-section-title">我的文章</h2>
                    {% if current_user.posts %}
                        <div class="profile-posts">
                            {% for post in current_user.posts|sort(attribute='created_at', reverse=True) %}
                                <div class="profile-post-card">
                                    <div class="profile-post-inner">
                                        {% if post.cover_image %}
                                        <div class="article-cover">
                                            <img class="lazy" src="{{ url_for('placeholder', width=300, height=169) }}" data-src="{{ url_for('static', filename=post.cover_image) }}" alt="{{ post.title }}">
                                        </div>
                                        {% else %}
                                        <div class="article-cover">
                                            <img class="lazy" src="{{ url_for('placeholder', width=300, height=169) }}" data-src="{{ url_for('static', filename='img/default-cover.jpg') }}" alt="默认封面">
                                        </div>
                                        {% endif %}
                                        <div class="post-content">
                                            <h3 class="profile-post-title">
                                                <a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a>
                                            </h3>
                                            <div class="profile-post-date">发布于：{{ post.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
                                            <div class="profile-post-tags">
                                                {% for tag in post.tags %}
                                                    <span class="tag">{{ tag.name }}</span>
                                                {% endfor %}
                                            </div>
                                            <div class="post-actions">
                                                <a href="{{ url_for('edit_post', post_id=post.id) }}" class="btn-edit">
                                                    <span class="button_top">编辑</span>
                                                </a>
                                                <button class="btn-delete" data-id="{{ post.id }}" data-title="{{ post.title }}">
                                                    <span class="button_top">删除</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="no-content">
                            <p>您还没有发布任何文章</p>
                            <a href="{{ url_for('write_post') }}" class="btn btn-primary">开始写作</a>
                        </div>
                    {% endif %}
                </section>
            </div>
            
            <!-- 右侧栏 - 今日待办事项 -->
            <div class="profile-right-column">
                <section class="profile-section">
                    <div class="section-header-main">
                        <h2 class="profile-section-title">待办事项</h2>
                        <div class="date-selector">
                            <input type="date" id="taskDatePicker" class="date-picker">
                            <button type="button" id="resetTaskDate" class="reset-date-btn" title="返回今天">今天</button>
                        </div>
                    </div>
                    
                    <!-- 添加新任务的表单 -->
                    <div class="add-task-container">
                        <form action="{{ url_for('add_task') }}" method="POST" class="add-task-form">
                            <div class="task-form-group">
                                <div class="input-container">
                                    <input type="text" name="title" id="taskTitle" required>
                                    <label for="taskTitle" class="label">输入任务标题...</label>
                                    <div class="underline"></div>
                                </div>
                                
                                <div class="input-container">
                                    <textarea name="description" id="taskDescription"></textarea>
                                    <label for="taskDescription" class="label">任务描述（可选）</label>
                                    <div class="underline"></div>
                                </div>
                            </div>
                            <div class="task-form-group task-form-row">
                                <div>
                                    <label for="deadline">截止日期（可选）：</label>
                                    <input type="date" name="deadline" id="deadline" class="task-date">
                                </div>
                                <div>
                                    <label for="priority">优先级：</label>
                                    <select name="priority" id="priority" class="task-select">
                                        <option value="0">低</option>
                                        <option value="1">中</option>
                                        <option value="2">高</option>
                                    </select>
                                </div>
                                <button type="submit" class="add-task-btn">添加任务</button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 任务列表容器，会根据选择的日期动态加载内容 -->
                    <div id="tasksContainer" class="tasks-container">
                        <!-- 任务列表将通过JavaScript动态加载 -->
                        <div class="loading-spinner" id="tasksLoading" style="display: none;">
                            <div class="spinner"></div>
                            <p>加载中...</p>
                        </div>
                        
                        <div id="tasksList">
                            {% if tasks %}
                                <div class="task-list">
                                    {% for task in tasks %}
                                        <div class="task-item {% if task.completed %}completed{% endif %} priority-{{ task.priority }}">
                                            <div class="task-checkbox-container">
                                                <form action="{{ url_for('complete_task', task_id=task.id) }}" method="POST" class="task-complete-form">
                                                    <button type="submit" class="task-checkbox {% if task.completed %}checked{% endif %}">
                                                        {% if task.completed %}
                                                            <i class="fa fa-check"></i>
                                                        {% endif %}
                                                    </button>
                                                </form>
                                            </div>
                                            <div class="task-content">
                                                <h3 class="task-title">{{ task.title }}</h3>
                                                {% if task.description %}
                                                    <p class="task-description">{{ task.description }}</p>
                                                {% endif %}
                                                <div class="task-meta">
                                                    {% if task.deadline %}
                                                        <span class="task-deadline {% if task.deadline.date() < today %}overdue{% endif %}">
                                                            <i class="fa fa-calendar"></i> {{ task.deadline.strftime('%Y-%m-%d') }}
                                                        </span>
                                                    {% endif %}
                                                    <span class="task-date">添加于：{{ task.created_at.strftime('%Y-%m-%d') }}</span>
                                                </div>
                                            </div>
                                            <div class="task-actions">
                                                <form action="{{ url_for('delete_task', task_id=task.id) }}" method="POST" class="task-delete-form">
                                                    <button type="submit" class="task-delete-btn">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="no-tasks-message">
                                    <p>今日暂无待办事项。</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </section>
                
                <!-- 时间线模块 - 随手记 -->
                <section class="profile-section">
                    <div class="section-header-main">
                        <h2 class="profile-section-title">随手记</h2>
                        <div class="date-selector">
                            <input type="date" id="noteDatePicker" class="date-picker">
                            <button type="button" id="resetNoteDate" class="reset-date-btn" title="返回今天">今天</button>
                        </div>
                    </div>
                    
                    <!-- 随手记列表容器，会根据选择的日期动态加载内容 -->
                    <div id="notesContainer" class="timeline-container">
                        <!-- 加载指示器 -->
                        <div class="loading-spinner" id="notesLoading" style="display: none;">
                            <div class="spinner"></div>
                            <p>加载中...</p>
                        </div>
                        
                        <div id="notesList">
                            {% if today_notes %}
                                <div class="s-timeline">
                                    {% for note in today_notes %}
                                        <div class="timeline-item">
                                            <div class="timeline-dot"></div>
                                            <div class="timeline-content">
                                                <div class="timeline-time">{{ note.created_at.strftime('%H:%M') }}</div>
                                                <p class="timeline-text">{{ note.content }}</p>
                                                {% if note.location %}
                                                    <div class="timeline-location">
                                                        <i class="fa fa-map-marker"></i> {{ note.location }}
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="no-notes-message">
                                    <p>今日暂无随手记录，可以在首页侧边栏添加。</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </section>
            </div>
        </div>
    {% else %}
        <div class="no-content">
            <p>请先登录以查看个人中心</p>
            <a href="{{ url_for('login') }}" class="btn btn-primary">登录</a>
        </div>
    {% endif %}
</div>

<!-- 确认删除对话框 -->
<div class="confirm-dialog" id="deleteConfirmDialog">
    <div class="dialog-content">
        <h3 class="dialog-title">确认删除</h3>
        <p class="dialog-message" id="deleteConfirmMessage">确定要删除这篇文章吗？此操作不可恢复。</p>
        <div class="dialog-buttons">
            <button class="btn-cancel" onclick="cancelDelete()">
                <span class="button_top">取消</span>
            </button>
            <form id="deleteForm" method="POST" action="">
                <button type="submit" class="btn-confirm">
                    <span class="button_top">确认删除</span>
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 使用事件委托处理删除按钮点击
    document.addEventListener('DOMContentLoaded', function() {
        const profilePosts = document.querySelector('.profile-posts');
        if (profilePosts) {
            profilePosts.addEventListener('click', function(event) {
                const deleteBtn = event.target.closest('.btn-delete');
                if (deleteBtn) {
                    const postId = deleteBtn.getAttribute('data-id');
                    const postTitle = deleteBtn.getAttribute('data-title');
                    confirmDelete(postId, postTitle);
                }
            });
        }
        
        // 图片延迟加载
        var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

        if ("IntersectionObserver" in window) {
            let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        let lazyImage = entry.target;
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.classList.add("loaded");
                        lazyImageObserver.unobserve(lazyImage);
                    }
                });
            });

            lazyImages.forEach(function(lazyImage) {
                lazyImageObserver.observe(lazyImage);
            });
        } else {
            // 回退到更简单的方法
            let active = false;

            const lazyLoad = function() {
                if (active === false) {
                    active = true;

                    setTimeout(function() {
                        lazyImages.forEach(function(lazyImage) {
                            if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                                lazyImage.src = lazyImage.dataset.src;
                                lazyImage.classList.add("loaded");

                                lazyImages = lazyImages.filter(function(image) {
                                    return image !== lazyImage;
                                });

                                if (lazyImages.length === 0) {
                                    document.removeEventListener("scroll", lazyLoad);
                                    window.removeEventListener("resize", lazyLoad);
                                    window.removeEventListener("orientationchange", lazyLoad);
                                }
                            }
                        });

                        active = false;
                    }, 200);
                }
            };

            document.addEventListener("scroll", lazyLoad);
            window.addEventListener("resize", lazyLoad);
            window.addEventListener("orientationchange", lazyLoad);
            lazyLoad();
        }
        
        // 获取当前日期，用于判断任务是否逾期
        var today = new Date();
        today.setHours(0, 0, 0, 0);
        
        // 添加日期验证，防止选择过去的日期
        var deadlineInput = document.getElementById('deadline');
        if (deadlineInput) {
            var todayStr = today.toISOString().split('T')[0];
            deadlineInput.setAttribute('min', todayStr);
        }
    });

    function confirmDelete(postId, postTitle) {
        // 设置删除表单的提交地址
        document.getElementById('deleteForm').action = "/delete_post/" + postId;
        // 设置确认信息
        document.getElementById('deleteConfirmMessage').innerText = `确定要删除文章"${postTitle}"吗？此操作不可恢复。`;
        // 显示确认对话框
        document.getElementById('deleteConfirmDialog').style.display = 'flex';
    }

    function cancelDelete() {
        // 隐藏确认对话框
        document.getElementById('deleteConfirmDialog').style.display = 'none';
    }

    // 点击对话框外部区域关闭对话框
    window.onclick = function(event) {
        var dialog = document.getElementById('deleteConfirmDialog');
        if (event.target == dialog) {
            dialog.style.display = 'none';
        }
    }
    
    // 处理近三天历史记录的展开/折叠
    document.addEventListener('DOMContentLoaded', function() {
        // 处理待办事项历史记录
        const toggleRecentTasksBtn = document.getElementById('toggleRecentTasks');
        const recentTasksList = document.getElementById('recentTasksList');
        
        if (toggleRecentTasksBtn && recentTasksList) {
            toggleRecentTasksBtn.addEventListener('click', function() {
                if (recentTasksList.style.display === 'none') {
                    recentTasksList.style.display = 'block';
                    toggleRecentTasksBtn.classList.add('active');
                } else {
                    recentTasksList.style.display = 'none';
                    toggleRecentTasksBtn.classList.remove('active');
                }
            });
        }
        
        // 处理随手记历史记录
        const toggleRecentNotesBtn = document.getElementById('toggleRecentNotes');
        const recentNotesList = document.getElementById('recentNotesList');
        
        if (toggleRecentNotesBtn && recentNotesList) {
            toggleRecentNotesBtn.addEventListener('click', function() {
                if (recentNotesList.style.display === 'none') {
                    recentNotesList.style.display = 'block';
                    toggleRecentNotesBtn.classList.add('active');
                } else {
                    recentNotesList.style.display = 'none';
                    toggleRecentNotesBtn.classList.remove('active');
                }
            });
        }
        
        // 设置今天的日期为默认值
        const today = new Date();
        const todayStr = formatDate(today);
        
        // 获取日期选择器元素
        const taskDatePicker = document.getElementById('taskDatePicker');
        const noteDatePicker = document.getElementById('noteDatePicker');
        const resetTaskDateBtn = document.getElementById('resetTaskDate');
        const resetNoteDateBtn = document.getElementById('resetNoteDate');
        
        // 初始化日期选择器为今天
        if (taskDatePicker) {
            taskDatePicker.value = todayStr;
            taskDatePicker.max = todayStr; // 限制不能选择未来日期
        }
        
        if (noteDatePicker) {
            noteDatePicker.value = todayStr;
            noteDatePicker.max = todayStr; // 限制不能选择未来日期
        }
        
        // 处理任务日期选择事件
        if (taskDatePicker) {
            taskDatePicker.addEventListener('change', function() {
                const selectedDate = this.value;
                loadTasksByDate(selectedDate);
            });
        }
        
        // 处理随手记日期选择事件
        if (noteDatePicker) {
            noteDatePicker.addEventListener('change', function() {
                const selectedDate = this.value;
                loadNotesByDate(selectedDate);
            });
        }
        
        // 重置到今天的按钮事件
        if (resetTaskDateBtn) {
            resetTaskDateBtn.addEventListener('click', function() {
                taskDatePicker.value = todayStr;
                loadTasksByDate(todayStr);
            });
        }
        
        if (resetNoteDateBtn) {
            resetNoteDateBtn.addEventListener('click', function() {
                noteDatePicker.value = todayStr;
                loadNotesByDate(todayStr);
            });
        }
        
        // 监听localStorage变化，检测随手记更新
        window.addEventListener('storage', function(e) {
            if (e.key === 'noteUpdated') {
                console.log('检测到随手记更新，正在刷新个人中心数据');
                // 如果当前选择的日期是今天，则重新加载今天的随手记
                if (noteDatePicker && noteDatePicker.value === todayStr) {
                    loadNotesByDate(todayStr);
                }
            }
        });
        
        // 同时在页面加载时检查是否有最近的更新
        const lastUpdateTime = localStorage.getItem('noteUpdated');
        if (lastUpdateTime) {
            const now = Date.now();
            const timeDiff = now - parseInt(lastUpdateTime);
            // 如果最近5秒有更新，也重新加载数据
            if (timeDiff < 5000) {
                console.log('页面加载时检测到最近的随手记更新，重新加载数据');
                loadNotesByDate(todayStr);
            }
        }
        
        // 每次进入个人中心页面时，都主动同步随手记数据
        // 无论是否有localStorage变化，都确保加载最新数据
        if (noteDatePicker && noteDatePicker.value === todayStr) {
            console.log('个人中心页面加载，主动同步随手记数据');
            loadNotesByDate(todayStr);
        }
        
        // 格式化日期为 YYYY-MM-DD 格式
        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        
        // 根据日期加载待办事项
        function loadTasksByDate(date) {
            const tasksLoading = document.getElementById('tasksLoading');
            const tasksList = document.getElementById('tasksList');
            
            if (!tasksList || !tasksLoading) return;
            
            // 显示加载中
            tasksList.style.display = 'none';
            tasksLoading.style.display = 'block';
            
            // 发起API请求
            fetch(`/api/tasks/by_date?date=${date}`)
                .then(response => response.json())
                .then(data => {
                    // 隐藏加载中
                    tasksLoading.style.display = 'none';
                    tasksList.style.display = 'block';
                    
                    if (data.success) {
                        renderTasks(data.tasks, date);
                    } else {
                        // 显示错误信息
                        tasksList.innerHTML = `<div class="no-tasks-message"><p>加载失败: ${data.message}</p></div>`;
                    }
                })
                .catch(error => {
                    // 隐藏加载中，显示错误信息
                    tasksLoading.style.display = 'none';
                    tasksList.style.display = 'block';
                    tasksList.innerHTML = `<div class="no-tasks-message"><p>加载失败: ${error.message}</p></div>`;
                });
        }
        
        // 根据日期加载随手记
        function loadNotesByDate(date) {
            const notesLoading = document.getElementById('notesLoading');
            const notesList = document.getElementById('notesList');
            
            if (!notesList || !notesLoading) return;
            
            // 显示加载中
            notesList.style.display = 'none';
            notesLoading.style.display = 'block';
            
            // 发起API请求
            fetch(`/api/notes/by_date?date=${date}`)
                .then(response => response.json())
                .then(data => {
                    // 隐藏加载中
                    notesLoading.style.display = 'none';
                    notesList.style.display = 'block';
                    
                    if (data.success) {
                        renderNotes(data.notes, date);
                    } else {
                        // 显示错误信息
                        notesList.innerHTML = `<div class="no-notes-message"><p>加载失败: ${data.message}</p></div>`;
                    }
                })
                .catch(error => {
                    // 隐藏加载中，显示错误信息
                    notesLoading.style.display = 'none';
                    notesList.style.display = 'block';
                    notesList.innerHTML = `<div class="no-notes-message"><p>加载失败: ${error.message}</p></div>`;
                });
        }
        
        // 渲染待办事项列表
        function renderTasks(tasks, date) {
            const tasksList = document.getElementById('tasksList');
            if (!tasksList) return;
            
            if (!tasks || tasks.length === 0) {
                const dateObj = new Date(date);
                const formattedDate = dateObj.toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                
                tasksList.innerHTML = `
                    <div class="no-tasks-message">
                        <p>${date === todayStr ? '今日' : formattedDate}暂无待办事项。</p>
                    </div>
                `;
                return;
            }
            
            let html = '<div class="task-list">';
            
            tasks.forEach(task => {
                html += `
                    <div class="task-item ${task.completed ? 'completed' : ''} priority-${task.priority}">
                        <div class="task-checkbox-container">
                            <div class="task-checkbox ${task.completed ? 'checked' : ''}">
                                ${task.completed ? '<i class="fa fa-check"></i>' : ''}
                            </div>
                        </div>
                        <div class="task-content">
                            <h3 class="task-title">${task.title}</h3>
                            ${task.description ? `<p class="task-description">${task.description}</p>` : ''}
                            <div class="task-meta">
                                ${task.deadline ? `
                                    <span class="task-deadline">
                                        <i class="fa fa-calendar"></i> ${task.deadline.split(' ')[0]}
                                    </span>
                                ` : ''}
                                <span class="task-date">添加于：${task.created_at.split(' ')[0]}</span>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            tasksList.innerHTML = html;
        }
        
        // 渲染随手记列表
        function renderNotes(notes, date) {
            const notesList = document.getElementById('notesList');
            if (!notesList) return;
            
            if (!notes || notes.length === 0) {
                const dateObj = new Date(date);
                const formattedDate = dateObj.toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                
                notesList.innerHTML = `
                    <div class="no-notes-message">
                        <p>${date === todayStr ? '今日' : formattedDate}暂无随手记录。</p>
                    </div>
                `;
                return;
            }
            
            let html = '<div class="s-timeline">';
            
            notes.forEach(note => {
                html += `
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <div class="timeline-time">${note.created_at.split(' ')[1]}</div>
                            <p class="timeline-text">${note.content}</p>
                            ${note.location ? `
                                <div class="timeline-location">
                                    <i class="fa fa-map-marker"></i> ${note.location}
                                </div>
                            ` : ''}
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            notesList.innerHTML = html;
        }
    });
</script>
{% endblock %} 